<template>
  <div class="patient-reported-left-edit-visit-table">
    <div class="dialog-content">
      <div>
        <div><span>*</span>eCRF调整：</div>
        <el-transfer v-model="transferValue" :data="data"></el-transfer>
      </div>
    </div>
    <div class="desc">请点击方向按钮完成eCRF表的选择</div>
    <div slot="footer" class="dialog-footer" style="margin-top:30px;text-align: center;">
      <el-button type="primary" size="mini" @click="onSubmit">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  props: {
    currentVisit: {
      type: Object
    }
  },
  data() {
    return {
      data: [],
      transferValue: []
    };
  },
  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo
    }),
    ...mapGetters({
      findRole: "treatment/findRole"
    })
  },
  mounted() {
    this.findUsedTable();
  },
  methods: {
    ...mapActions('eCRFDetail', ['getUsedTable','subjectVisitUpdateTable']),
    findUsedTable: function() {
      const { id } = this.subjectInfo;
      const params = {   
        subjectVisitId: this.currentVisit.id,
        subjectId: id
      }
      this.getUsedTable({ params })
        .then(res => {
          const {
            code,
            data: { allTable, usedTable },
            message
          } = res;
          if (code == 200) {
            this.data = allTable.map(item => {
              const { id: key, tableName: label } = item;
              return { key, label };
            });
            this.transferValue = usedTable.map(item => item.id);
          } else {
            this.$message.error(message);
          }
        })
        .catch(error => {
          this.$message.error(error);
        })
        .finally(() => {

        });
    },
    onSubmit: function() {
      const { id, databaseVersion } = this.subjectInfo;
        let coreCodes = ''
        let coreNames = ''
        this.subjectInfo.subjectDetails && this.subjectInfo.subjectDetails.forEach(item => {
          if (item.variable === 'SITEID') {
            coreCodes = item.variableValue
          }
          if (item.variable === 'SITENAME') {
            coreNames = item.variableValue
          }
        })
        let data = {
          subjectId: id,
          databaseVersion,
          roleId: localStorage.getItem('roleId'),
          coreCode: coreCodes,
          coreName: coreNames,
          subjectVisitId: this.currentVisit.id,
          tableIds: this.transferValue,
        };

        if (this.visitNameSelected) {
          data.visitName = this.visitNameSelected;
        } else {
          data.tableIds = this.transferValue;
        }
      this.subjectVisitUpdateTable({ data }).then(res => {
        const { code } = res
        if (code === 200) {
          this.$message.success('修改成功')
          this.$emit("close");
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.patient-reported-left-edit-visit-table {
  .dialog-content {
    > div {
      padding-top: 0.5rem;
      > div {
        text-align: left;
        font-size: 0.9rem;
        color: #303132;
        padding-bottom: 0.35rem;
        > span {
          color: #f56c6c;
        }
      }
    }
  }
  .desc {
    text-align: start;
    font-size: 0.75rem;
    color: #888888;
  }
}
</style>
